<template>
  <a-drawer
    :width="1300"
    closable
    :body-style="{padding:'12px'}"
    placement="right"
    :visible="visible"
    @close="visible=false"
  >
    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000;font-weight: bold;">治疗明细</div>
      <div style="font-size: 12px;margin-left: 30px;color: #333333;">姓名：{{row_record.name}}</div>
      <div style="font-size: 12px;margin-left: 20px;color: #333333;">卡号：{{row_record.cardNo}}</div>
    </div>
    <div class="position-content">
      <a-tabs :activeKey="currentActiveKey" @change="changeTabs" type="line" style="height: 100%;">
        <a-tab-pane :key="1" tab="基本信息">
<!--          <a-form :form="form" layout="inline" style="margin: 10px 0;">-->
<!--            <a-form-item label="治疗备注" >-->
<!--              <a-textarea-->
<!--                :rows="2"-->
<!--                style="width: 500px;"-->
<!--                placeholder="输入备注"-->
<!--                v-model="textareaData"-->
<!--              >-->
<!--              </a-textarea>-->
<!--            </a-form-item>-->
<!--          </a-form>-->
          <a-table
            bordered
            size="small"
            :columns="baseInfoColumns"
            :data-source="tableData"
            :rowKey="(record,index)=> index"
          >
          </a-table>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="门诊处方">
          <span v-show="!isAddRecipe" >
            <a-button type="primary" @click="isAddRecipe=true">新增</a-button>
            <!--历史处方-->
            <a-popover
              :visible="historyRecipePopoverVisible"
              @visibleChange="historyRecipeVisibleChange"
              autoAdjustOverflow
              trigger="click"
              placement="bottomRight">
              <template slot="content">
                <div style="width:1000px;">
                  <a-table
                    bordered
                    style="margin-top: 15px;"
                    size="small"
                    :columns="outpatientRecipeColumns"
                    :data-source="HistoryPrescriptionTableData"
                    :rowKey="(record,index)=> index"
                  >
                  </a-table>
                </div>
              </template>
              <a-button type="primary" style="margin-left: 15px;">历史处方</a-button>
            </a-popover>
          </span>
          <!-- 处方列表-->
          <div v-show="!isAddRecipe">
            <a-table
              style="margin-top: 20px;"
              :scroll="{x:850}"
              bordered
              size="small"
              :columns="outpatientRecipeColumns"
              :data-source="PrescriptionTableData"
              :rowKey="(record,index)=> index"
            >
              <template slot="action" slot-scope="record">
                <a-button type="link" class="g-bt-pad-0" @click="clickInvalidPrescription(record)">作废</a-button>
              </template>
            </a-table>
          </div>
          <div v-show="isAddRecipe">
            <!--表单条件--->
            <div class="table-page-search-wrapper">
              <a-form layout="inline" :form="form" :selfUpdate="true">
                <a-row :gutter="16">
                  <a-col :span="6" >
                    <a-form-item label="处方日期">
                      <a-date-picker
                        :disabled-date="disabledDate"
                        :show-time="{format:'HH:mm'}"
                        format="YYYY-MM-DD HH:mm"
                        placeholder="选择预约时间"
                        style="width: 100%"
                        v-decorator="['recipelDate', {rules: [{ required: true, message: '请选择处方日期！' }]}]"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6" >
                    <a-form-item label="处方类型">
                      <a-select
                        allow-clear
                        style="width: 100%"
                        placeholder="请选择"
                        v-decorator="['recipelType', {rules: [{ required: false, message: '请选择处方类型！' }]}]" >
                        <a-select-option v-for="(item,index) in recipelTypeList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6" >
                    <a-form-item label="特药类型">
                      <a-select
                        allow-clear
                        style="width: 100%"
                        placeholder="请选择"
                        v-decorator="['specialType', {rules: [{ required: false, message: '请选择特药类型！' }]}]" >
                        <a-select-option v-for="(item,index) in specialTypeList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6" >
                    <a-form-item label="科室">
                      <a-select
                        allow-clear
                        style="width: 100%"
                        placeholder="请选择"
                        v-decorator="['deptId', {rules: [{ required: true, message: '请选择科室！' }]}]" >
                        <a-select-option v-for="(item,index) in deptList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="16">
                  <a-col :span="12" >
                    <a-form-item label="病情与诊断">
                      <a-input v-decorator="['diagnosis', {rules: [{ required: true, message: '请填写病情与诊断！' }]}]" allow-clear placeholder="请输入"/>
                    </a-form-item>
                  </a-col>
                  <a-col :span="4" >
                    <a-form-item label="费用类别">
                      <a-select
                        allow-clear
                        style="width: 100%"
                        placeholder="请选择"
                        v-decorator="['costType', {rules: [{ required: false, message: '请选择费用类别！' }]}]" >
                        <a-select-option v-for="(item,index) in costTypeList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="4" >
                    <a-form-item label="医生">
                      <a-select
                        allow-clear
                        style="width: 100%"
                        placeholder="请选择"
                        v-decorator="['recipelDrId', {rules: [{ required: false, message: '请选择处方医生！' }]}]" >
                        <a-select-option v-for="(item,index) in doctorList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="4" >
                    <a-form-item label="代办人">
                      <a-select
                        allow-clear
                        style="width: 100%"
                        placeholder="请选择"
                        v-decorator="['agentId', {rules: [{ required: false, message: '请选择代办人！' }]}]" >
                        <a-select-option v-for="(item,index) in agentList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>

                </a-row>
              </a-form>
            </div>
            <!--返回--->
            <a-button type="primary" icon="left" @click="isAddRecipe=false" >返回</a-button>
            <!--选中模板--->
            <a-popover :visible="templatePopoverVisible" @visibleChange="templateVisibleChange" autoAdjustOverflow trigger="click" placement="bottomRight">
              <template slot="title"><span>点击左边查看模板</span></template>
              <template slot="content">
                <div style="width:1150px;height: 400px;position: relative;" class="g-flex g-x-between">
                  <div  class="content-left">
                    <div class="title">模板名称</div>
                    <div class="content">
                      <div
                        v-for="(item,index) in templatePrescriptionList"
                        :class="['item',{'currentTemplatePrescriptionclass':currentTemplatePrescriptionIndex===index}]"
                        :key="item.id"
                        @click="clickTemplatePrescription(item.id,index)">
                        {{item.name}}
                      </div>
                    </div>
                  </div>
                  <div style="width: 1000px;height: 100%;">
                    <!--按钮里面的表格-->
                    <a-table
                      :scroll="{y:360}"
                      :pagination="false"
                      size="small"
                      :columns="templateRecipeColumns"
                      :data-source="templatePrescriptionDetailsTableData"
                      :rowKey="(record,index)=> index"
                    >
                    </a-table>
                    <div style="position: absolute;bottom: 5px;right: 10px;">
                      <a-button type="primary" style="margin-right: 15px;" @click="saveTemplatePrescription" >保存模板</a-button>
                      <a-button  @click="templatePopoverVisible=false">取消</a-button>
                    </div>
                  </div>
                </div>
              </template>
              <a-button type="primary" @click="isAddRecipe=true" style="margin: 0 10px;">选择模板</a-button>
            </a-popover>
            <!--添加产品--->
            <a-popover :visible="productPopoverVisible" @visibleChange="productVisibleChange" autoAdjustOverflow trigger="click" placement="bottomRight">
              <template slot="title"><span>双击选择产品</span></template>
              <template slot="content">
                <a-spin :spinning="spinning">
                  <div style="width:600px;">
                    <div class="table-page-search-wrapper">
                      <a-form layout="inline">
                        <a-row :gutter="24">
                          <a-col :span="12">
                            <a-form-item label="拼音码" style="margin-bottom: 0;">
                              <a-input v-decorator="['pyCode']" allow-clear placeholder="请输入" />
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item label="产品名称" style="margin-bottom: 0;">
                              <a-input v-decorator="['productName']" allow-clear placeholder="请输入" />
                            </a-form-item>
                          </a-col>
                        </a-row>
                      </a-form>
                    </div>
                    <!--按钮里面的表格-->
                    <a-table
                      :pagination="productTablePagination"
                      style="margin-top: 15px;"
                      size="small"
                      :columns="productColumns"
                      :data-source="productTableData"
                      :rowKey="(record,index)=> index"
                      :customRow="clickRow"
                      @change="handleProductTableChange"
                    >
                    </a-table>
                  </div>
                </a-spin>
              </template>
              <a-button icon="plus-circle" type="primary">添加产品</a-button>
            </a-popover>
            <!--提交收费-->
            <a-button type="primary" style="margin-left: 15px;" @click="submitTemplatePrescription">保存</a-button>
            <a-table
              style="margin-top: 20px;"
              bordered
              size="small"
              :columns="insertRecipeColumns"
              :data-source="insertRecipeTableData"
              :rowKey="(record,index)=> index"
            >
            </a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane :key="3" tab="医嘱情况" >
          <DoctorAdvice :row_record="row_record"/>
        </a-tab-pane>
        <a-tab-pane :key="4" tab="手术情况">
          <a-table
            :scroll="{x:850}"
            bordered
            size="small"
            :columns="SurgerySituationColumns"
            :data-source="SurgerySituationTable"
            :rowKey="(record,index)=> index"
          >
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-drawer>
</template>

<script>
import {
  DoctorBasicInformation,
  PrescriptionList,
  HistoryPrescriptionList,
  invalidPrescription,
  PrescriptionTemplate,
  getPrescriptionTemplateDetail,
  addOrUpdatePrescription,
  getDropdownMenuByCode,
  productList,
  PrescriptionDetailByProductId,
  SurgerySituation
} from '@/api/workstation/doctor'
import {columns} from './columns'
import moment from 'moment'
import { dictTypeListForCode } from '@/api/modular/main/customer/customerTriage'
import DoctorAdvice from '@/views/workstation/doctor/DoctorAdvice'
export default {
  components:{
    DoctorAdvice
  },
  data () {
    return {
      row_record:{},
      tableData:[],
      productTableData:[],
      PrescriptionTableData:[],
      HistoryPrescriptionTableData:[],
      templatePrescriptionDetailsTableData:[],
      templatePrescriptionList:[],
      insertRecipeTableData:[],
      DoctorOrderTableData:[],
      awaitDoctorAdviceSituationTableData:[],
      recipelTypeList:[], //处方类型
      specialTypeList:[], //特药类型
      deptList:[], //科室列表
      costTypeList:[], //特药类型
      doctorList:[], //医生列表
      agentList:[], //医生列表
      SurgerySituationTable:[],
      textareaData:'',
      visible:false,
      spinning:false,
      isAddRecipe:false,
      form: this.$form.createForm(this),
      currentActiveKey: 1,

      doctorAdviceSituation:1,
      //基本信息
      baseInfoColumns: columns.baseInfoColumns,
      //门诊处方
      outpatientRecipeColumns: columns.outpatientRecipeColumns,
      //模板处方
      templateRecipeColumns: columns.templateRecipeColumns,
      //门诊录入
      insertRecipeColumns: columns.insertRecipeColumns,
      //物料明细
      materialDetailsColumns: columns.materialDetailsColumns,
      //医嘱情况-执行信息-产品信息
      productInfoColumns: columns.productInfoColumns,
      //手术管理
      SurgerySituationColumns:columns.SurgerySituationColumns,
      productColumns: columns.productColumns,

      productPopoverVisible:false,
      historyRecipePopoverVisible:false,
      templatePopoverVisible : false,
      productTableQueryParam:{
        pageNum:1,
        pageSize:10
      },
      productTablePagination: {
        current: 1, //当前页
        pageSize: 10, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '15'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `${total}条 `, //分页中显示总的数据
      },
      currentTemplatePrescriptionIndex:0
    }
  },
  methods: {
    /**
     * 抽屉展开初始化方法
     * */
    show (record) {
      this.visible = true
      this.row_record=record
      // this.getHistoryPrescriptionList()
      this.getBasicInformation()
      this.getPrescriptionList()
      this.getPrescriptionTemplate()
      this.getPrescriptionFormInfo()
      this.getProductList()
      this.getSurgerySituation()
    },
    /**
     * 获取基本信息
     * */
    getBasicInformation(){
      this.spinning = true
      const treatId = this.row_record.treatId
      const customerId =this.row_record.customerId
      DoctorBasicInformation({ treatId,customerId }).then(res=>{
        // console.log('获取基本信息',res)
        this.spinning = false
        this.tableData = res.rows
      })
    },
    getSurgerySituation(){
      const treatId = this.row_record.treatId
      SurgerySituation({treatId}).then(res=>{
        // console.log('获取手术情况',res)
        this.SurgerySituationTable = res.rows
      })
    },
    /**
     * 产品表格
     * */
    getProductList(){
      this.spinning = true
      productList(this.productTableQueryParam).then(res=>{
        this.productTableData = res.rows
        this.productTablePagination.total = parseInt(res.total) || 0
        // console.log('产品信息',this.productTableData)
      }).finally(()=>{
        this.spinning = false
      })
    },
    /**
     * 处方列表
     * */
    getPrescriptionList(){
      const treatId = this.row_record.treatId
      const customerId =this.row_record.customerId
      PrescriptionList({ treatId,customerId }).then(res=>{
        console.log('处方列表',res)
        this.PrescriptionTableData = res.rows
      })
    },
    /**
     * 历史处方列表
     * */
    getHistoryPrescriptionList(){
      const customerId =this.row_record.customerId
      HistoryPrescriptionList({ customerId }).then(res=>{
        // console.log('历史处方',res)
        this.HistoryPrescriptionTableData = res.rows
      })
    },
    /**
     * 获取处方模板
     * */
    getPrescriptionTemplate(){
      const customerId =this.row_record.customerId
      PrescriptionTemplate({ customerId }).then(res=>{
        // console.log('处方模板',res)
        this.templatePrescriptionList = res.data
        if(this.templatePrescriptionList.length>0){
          this.clickTemplatePrescription(this.templatePrescriptionList[0].id)
        }
      })
    },
    /**
     * 点击模板处方名称
     * **/
    clickTemplatePrescription(id,index){
      if(this.currentTemplatePrescriptionIndex==index) return
      this.currentTemplatePrescriptionIndex = index ||0
      getPrescriptionTemplateDetail({ templateId:id }).then(res=>{
        // console.log('模板处方明细',res)
        this.templatePrescriptionDetailsTableData = res.data
      })
    },
    /**
     * 保存模板处方
     * */
    saveTemplatePrescription(){
      this.insertRecipeTableData=this.insertRecipeTableData.concat(this.templatePrescriptionDetailsTableData)
      this.templatePopoverVisible = false
    },
    /**
     * 提交模板处方
     * */
    submitTemplatePrescription(){
      const { form: { validateFields } } = this
      validateFields((errors, values) =>{
        if (errors) {
          console.log('表单检验未通过111',errors,values)
          this.confirmLoading = false
          return
        }
        for(const item of this.deptList){
          if(item.id == values.deptId){
            values.deptName = item.name
            break
          }
        }
        if( values.recipelDate){
          values.recipelDate = moment(values.recipelDate).format('YYYY-MM-DD HH:mm:ss')
        }
        const params ={
          recipel:{
            ...values,
            treatId:this.row_record.treatId,
            clientId:this.row_record.customerId
          },
          recipelDetails:this.templatePrescriptionDetailsTableData,
        }
        addOrUpdatePrescription(params).then(res=>{
          // console.log('提交处方结果',res)
          if(res.code==200){
            this.$message.success(res.message)
            this.templatePopoverVisible = false
            this.getPrescriptionList()
          }else{
            this.$message.info(res.message)
          }
        })
      })
    },
    /**
    * 作废
    * **/
    clickInvalidPrescription(record){
      const recipelId = record.recipelId
      invalidPrescription({ recipelId }).then(res=>{
        // console.log('作废结果',res)
        if(res.code==200){
          this.$message.success(res.message)
          this.getPrescriptionList()
        }else{
          this.$message.info(res.message)
        }
      })
    },

    /**
     不可选择以前日期
     * */
    disabledDate(current) {
      // return current
      return current < moment().add(-1, 'd')
    },
    /**
     * 控制显示预存款气泡卡片--添加产品
     * */
    productVisibleChange(visible){
      this.productPopoverVisible=visible
    },
    /**
     * 控制显示预存款气泡卡片--历史处方
     * */
    historyRecipeVisibleChange(visible){
      this.historyRecipePopoverVisible=visible
    },
    /**
     * 控制显示预存款气泡卡片---选择模板
     * */
    templateVisibleChange(visible){
      this.templatePopoverVisible=visible
    },


    changeTabs(key) {
      this.currentActiveKey = key
    },

    checkChange(e, index, column) {
      const value = e.target.checked
      this.tableData[index][column] = value
    },
    /**
     分页
     * */
    handleProductTableChange(pagination, filters, sorter) {
      this.productTablePagination.current = pagination.current
      this.productTablePagination.pageSize = pagination.pageSize
      this.productTableQueryParam.pageNum=pagination.current
      this.productTableQueryParam.pageSize = pagination.pageSize
      this.getProductList()
    },
    /**
     处方表单下拉数据等
     * */
    getPrescriptionFormInfo(){
      //处方类型
      getDropdownMenuByCode({code:'09050011'}).then(res=>{
        // console.log('处方类型',res)
        if(res.length>0){
          this.recipelTypeList = res
        }
      })
      //特药类型
      getDropdownMenuByCode({code:'09050014'}).then(res=>{
        // console.log('特药类型',res)
        if(res.length>0){
          this.specialTypeList = res
        }
      })
      //科室列表
      getDropdownMenuByCode({code:'09050015'}).then(res=>{
        // console.log('科室列表',res)
        if(res.length>0){
          this.deptList = res
        }
      })

      //费用类别
      getDropdownMenuByCode({code:'090129'}).then(res=>{
        // console.log('费用类别',res)
        if(res.length>0){
          this.costTypeList = res
        }
      })

      //医生类别
      const XCZXS = this.$options.filters['dictType']('dropdown_config','XCZXS')
      dictTypeListForCode({code:XCZXS}).then(res=>{
        this.doctorList = res
        this.agentList = res
      })
    },
    /**
     表格行点击事件
     * */
    clickRow(record){
      return {
        on: {
          dblclick:(e)=>{
            console.log('record',record)
            PrescriptionDetailByProductId({productId:record.prdtId}).then(res=>{
              console.log('双击产品结果',res)
              if(res.data){
                this.insertRecipeTableData.unshift(res.data)
              }
            })
          }
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-small > .ant-table-content > .ant-table-body{
  margin: 0;
}
/deep/ .ant-tabs-content{
  height: 100%;
}
.position-content{
  position: absolute;
  right: 12px;
  left: 12px;
  bottom: 0;
  top: 60px;
}
.info-wrapper{
  height: 100%;
  padding-top: 5px;
  border-top: 1px solid #cccccc;
  .title{
    color: #999999;
    margin-bottom: 15px;
  }
}
.execute-info{
  border-right: 1px #e8e8e8 solid;
  padding: 0 12px;
  width: 39%;
}
/deep/ .ant-table-placeholder{
  border-top: none;
}
.content-left{
  width: 140px;
  //margin-right: 10px;
  padding: 7px;
  border: 1px solid #e8e8e8;
  .title{
    font-weight: bold;
    text-align: center;
    color: #333333;
    border-bottom: 1px #e8e8e8 solid;
    padding-bottom: 5px;
  }
  .item{
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
  }
  .content{
    overflow-y: auto;
    height: 93%;
    .currentTemplatePrescriptionclass{
      color: #3399ff;
    }
  }
}
/deep/  .ant-table-small.ant-table-bordered .ant-table-content{
  border-right: 0;
}
</style>

